<template>
    <div>     
        <el-container >

          <!-- 侧边栏模块部分 -->
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)" class="mySide">
    <!-- <el-menu :default-openeds="['1', '2']"> -->
    <el-menu :default-openeds="[dataIndex]" v-for="(item,index) in routes" :key="index" v-show="!item.hidden">
      <!-- 城市部分 -->
      <el-submenu :index="String(index+1)" @click.native="open(String(index+1))" >
        <template slot="title"><i :class="item.meta && item.meta.icon"></i>{{item.meta && item.meta.title}}</template>  
        <!-- 遍历children数组 -->
         <el-menu-item 
         v-show="!itemChild.hidden"
         :index="`${index+1}-${itemChildIndex+1}`" 
         v-for="(itemChild, itemChildIndex) in item.children || []" 
         :key="itemChild.path"
         >
           <i :class="itemChild.meta && itemChild.meta.icon"></i>
           <router-link :to="`${item.path}/${itemChild.path}`" tag="span">{{itemChild.meta && itemChild.meta.title}}</router-link>
         </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
  <!-- 侧边栏结束 -->

  <el-container>
      <!-- head部分 -->
    <el-header style="text-align: right; font-size: 18px">
        <div class="headTittle"><i class="iconfont icon-shujuku"></i><span>卖座后台管理系统</span></div>
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 18px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>{{username}}</span>
    </el-header>
    <!-- main部分 -->
    <el-main>     
     <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
    </div>
</template>
<script>
import {routes} from '@/router/index.js'
  export default {
    data() {      
      return {
       dataIndex:"",
       routes:routes
      }
    },
    methods: {
      //退出
      loginOut(){
        let url ="user/logout"
        this.$axios.post(url).then(res=>{
          console.log("退出成功")
        this.$store.commit('isLogin',false)
           this.$message.success("退出成功");
           this.$router.push('/')
        }).catch(err=>{
           this.$message.error("退出失败");           
        })
      },
      open(index){
        console.log('index',typeof index)
        this.dataIndex=index
      }
    },

    //计算属性
    computed: {
      username() {
      // 获取vuex的isLogin的值
      return this.$store.state.username
    }
    },
  };
</script>



<style lang="less" scoped>
.el-dropdown {   
  color: white !important;
    font-size: 18px !important;
}

  .el-header {
    background-color: #6ea695;
    color: white;
    line-height: 60px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;    
  }
  
  .el-aside {
    color: #333;
    position: absolute;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 10;
  }
  .el-main{
       margin-top: 52px;
    margin-left: 190px;
  }
  .headTittle{
      float: left;
      display: flex;
      align-items: center;
      i{
        // height: 30px;
        font-size: 32px;
        color: yellowgreen;
      }
  }
  .mySide{
    position: fixed;
    left: 0;
    top: 62px;
    i{
      margin-right: 5px;
    }
  }
  // el-table el-table--fit el-table--border el-table--enable-row-transition
  .el-table--border{
    z-index: 0;
  }
</style>

